<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<!-- ico图标配置 -->
	<link rel="icon" type="img/logo/ico" href="img/logo/favicon.ico">
	<!--chrome Android 地址栏颜色-->
	<meta name="theme-color" content="#3a3f51">
	<title>云深-开发时间轴</title>
	<script src="js/Js-body/b3.js" type="text/javascript" charset="utf-8"></script>
	<link rel="stylesheet" type="text/css" href="css/Course.css"/>
</head>
<body>
	<div id="time">
		<ul class="layui-timeline">
		        
		        <li class="layui-timeline-item">
		            <div class="relative">
		                <span class="time-first">08:30</span>
		            </div>
		            <i class="  layui-timeline-axis circle"></i>
		            <div class="layui-timeline-content layui-text">
		                <h3 class="layui-timeline-title">11月22日</h3>
		                <p>开始大致框架的搭建，寻找网页灵感与素材</p>
		                <ul>
		                    <li><借鉴了inis与handsome主题样式></li>
		                    <li><借鉴了字节跳动官网蓝白块布局></li>
		                </ul>
		            </div>
		        </li>
		        <li class="layui-timeline-item">
		            <div class="relative">
		                <span class="time-first">14:30</span>
		            </div>
		            <i class="  layui-timeline-axis circle"></i>
		            <div class="layui-timeline-content layui-text">
		                <h3 class="layui-timeline-title">11月22日</h3>
		                <p>书写HTML框架，使用浮动布局页面三栏效果</p>
		                <ul>
		                    <li><使用浮动布局三栏，完善左侧布局></li>
		                    <li><团队主页中心内嵌部分开始取材></li>
		                </ul>
		            </div>
		        </li>
				<li class="layui-timeline-item">
				    <div class="relative">
				        <span class="time-first">08:30</span>
				    </div>
				    <i class="  layui-timeline-axis circle"></i>
				    <div class="layui-timeline-content layui-text">
				        <h3 class="layui-timeline-title">11月23日</h3>
				        <p>优化头部导航栏，使用背景设置logo与ico</p>
				        <ul>
				            <li><使用阿里巴巴iconfont图标库></li>
				            <li><整体第一页面布局完成></li>
				        </ul>
				    </div>
				</li>
				<li class="layui-timeline-item">
				    <div class="relative">
				        <span class="time-first">13:00</span>
				    </div>
				    <i class="  layui-timeline-axis circle"></i>
				    <div class="layui-timeline-content layui-text">
				        <h3 class="layui-timeline-title">11月23日</h3>
				        <p>发现浮动布局缺陷，进行优化</p>
				        <ul>
				            <li><内嵌页面进行优化，开始仿照百度医生站点></li>
				            <li><修改浮动布局为行内块布局></li>
				        </ul>
				    </div>
				</li>
				<li class="layui-timeline-item">
				    <div class="relative">
				        <span class="time-first">08:30</span>
				    </div>
				    <i class="  layui-timeline-axis circle"></i>
				    <div class="layui-timeline-content layui-text">
				        <h3 class="layui-timeline-title">11月24日</h3>
				        <p>第一页面搭建完成，优化特效</p>
				        <ul>
				            <li><使用JavaScript优化背景动效></li>
				            <li><使用CSS关键帧优化动画与光效></li>
				        </ul>
				    </div>
				</li>
				<li class="layui-timeline-item">
				    <div class="relative">
				        <span class="time-first">14:00</span>
				    </div>
				    <i class="  layui-timeline-axis circle"></i>
				    <div class="layui-timeline-content layui-text">
				        <h3 class="layui-timeline-title">11月24日</h3>
				        <p>底部第二页面开始，调整布局居中</p>
				        <ul>
				            <li><调整全局剧中，再次优化布局></li>
				            <li><导航栏与图标超链接功能配置></li>
				        </ul>
				    </div>
				</li>
				<li class="layui-timeline-item">
				    <div class="relative">
				        <span class="time-first">08:30</span>
				    </div>
				    <i class="  layui-timeline-axis circle"></i>
				    <div class="layui-timeline-content layui-text">
				        <h3 class="layui-timeline-title">11月25日</h3>
				        <p>底部第二页面画布特效引入</p>
				        <ul>
				            <li><引入多个外部Js库，引入JQ库></li>
				            <li><修改完善引入的画布修改></li>
				        </ul>
				    </div>
					<li class="layui-timeline-item">
					    <div class="relative">
					        <span class="time-first">14:00</span>
					    </div>
					    <i class="  layui-timeline-axis circle"></i>
					    <div class="layui-timeline-content layui-text">
					        <h3 class="layui-timeline-title">11月25日</h3>
					        <p>底部3D图片盒子特效制作</p>
					        <ul>
					            <li><查询3D效果资料，开始写代码></li>
					            <li><调整盒子位置与居中对齐></li>
					        </ul>
					    </div>
					</li>
					<li class="layui-timeline-item">
					    <div class="relative">
					        <span class="time-first">22:30</span>
					    </div>
					    <i class="  layui-timeline-axis circle"></i>
					    <div class="layui-timeline-content layui-text">
					        <h3 class="layui-timeline-title">11月25日</h3>
					        <p>3D图片盒子制作成功</p>
					        <ul>
					            <li><灵感出现，效果制作成功></li>
					            <li><开始寻找下一个优化点></li>
					        </ul>
					    </div>
					</li>
				</li>
				<li class="layui-timeline-item">
				    <div class="relative">
				        <span class="time-first">08:00</span>
				    </div>
				    <i class="  layui-timeline-axis circle"></i>
				    <div class="layui-timeline-content layui-text">
				        <h3 class="layui-timeline-title">11月26日</h3>
				        <p>通知页面翻书效果尝试</p>
				        <ul>
				            <li><感谢QQ频道的某位前端大佬></li>
				            <li><灵感来源CSDN的一篇文章，感谢></li>
				        </ul>
				    </div>
				</li>	
				<li class="layui-timeline-item">
				    <div class="relative">
				        <span class="time-first">14:00</span>
				    </div>
				    <i class="  layui-timeline-axis circle"></i>
				    <div class="layui-timeline-content layui-text">
				        <h3 class="layui-timeline-title">11月26日</h3>
				        <p>第二页面左右侧伸缩栏制作</p>
				        <ul>
				            <li><感谢一位大佬提供JavaScript代码></li>
				            <li><修改部分CSS代码与Js代码></li>
				        </ul>
				    </div>
				</li>
				<li class="layui-timeline-item">
				    <div class="relative">
				        <span class="time-first">23:00</span>
				    </div>
				    <i class="  layui-timeline-axis circle"></i>
				    <div class="layui-timeline-content layui-text">
				        <h3 class="layui-timeline-title">11月26日</h3>
				        <p>寻找灵感，浏览博客与W3School</p>
				        <ul>
				            <li><W3School对Js学习很有帮助呢！></li>
				            <li><寻找并修改少量Js代码></li>
				        </ul>
				    </div>
				</li>
				<li class="layui-timeline-item">
				    <div class="relative">
				        <span class="time-first">08:00</span>
				    </div>
				    <i class="  layui-timeline-axis circle"></i>
				    <div class="layui-timeline-content layui-text">
				        <h3 class="layui-timeline-title">11月27日</h3>
				        <p>伸缩栏优化完成</p>
				        <ul>
				            <li><使用CSS翻转时伸缩栏左右对称></li>
				            <li><修改代码，美化滑动条与伸缩栏滚轮效果></li>
				        </ul>
				    </div>
				</li>
				<li class="layui-timeline-item">
				    <div class="relative">
				        <span class="time-first">14:00</span>
				    </div>
				    <i class="  layui-timeline-axis circle"></i>
				    <div class="layui-timeline-content layui-text">
				        <h3 class="layui-timeline-title">11月27日</h3>
				        <p>优化鼠标和其他效果</p>
				        <ul>
				            <li><优化鼠标样式与点击动画></li>
				            <li><使用Js修改鼠标右键功能与样式></li>
				        </ul>
				    </div>
				</li>
				<li class="layui-timeline-item">
				    <div class="relative">
				        <span class="time-first">08:00</span>
				    </div>
				    <i class="  layui-timeline-axis circle"></i>
				    <div class="layui-timeline-content layui-text">
				        <h3 class="layui-timeline-title">11月28日</h3>
				        <p>完善底部伸缩盒子特效</p>
				        <ul>
				            <li><Js代码源于W3School网站></li>
				            <li><修改部分Js，CSS修改盒子样式></li>
				        </ul>
				    </div>
				</li>
				<li class="layui-timeline-item">
				    <div class="relative">
				        <span class="time-first">15:00</span>
				    </div>
				    <i class="  layui-timeline-axis circle"></i>
				    <div class="layui-timeline-content layui-text">
				        <h3 class="layui-timeline-title">11月28日</h3>
				        <p>伸缩盒子完成</p>
				        <ul>
				            <li><使用图片背景，模拟卷轴样式></li>
				            <li><配合Js达到下滑出现效果></li>
				        </ul>
				    </div>
				</li>
				<li class="layui-timeline-item">
				    <div class="relative">
				        <span class="time-first">08:00</span>
				    </div>
				    <i class="  layui-timeline-axis circle"></i>
				    <div class="layui-timeline-content layui-text">
				        <h3 class="layui-timeline-title">11月29日</h3>
				        <p>完善底部版权与备案信息</p>
				        <ul>
				            <li><未备案，仅仅作为一个效果展示></li>
				            <li><书写html开源文档，内容照搬></li>
				        </ul>
				    </div>
				</li>
				<li class="layui-timeline-item">
				    <div class="relative">
				        <span class="time-first">14:00</span>
				    </div>
				    <i class="  layui-timeline-axis circle"></i>
				    <div class="layui-timeline-content layui-text">
				        <h3 class="layui-timeline-title">11月29日</h3>
				        <p>所有页面将近完成</p>
				        <ul>
				            <li><优化SEO与浏览器内核方式></li>
				            <li><压缩部分JavaScript代码></li>
				        </ul>
				    </div>
				</li>
				<li class="layui-timeline-item">
				    <div class="relative">
				        <span class="time-first">08:00</span>
				    </div>
				    <i class="  layui-timeline-axis circle"></i>
				    <div class="layui-timeline-content layui-text">
				        <h3 class="layui-timeline-title">11月30日</h3>
				        <p>书写开发文档</p>
				        <ul>
				            <li><正在书写.....></li>
				            <li><正在完善.....></li>
				        </ul>
				    </div>
				</li>
		    </ul>
	</div>
</body>
</html>